import styled from "@emotion/styled"
import Svg from "@/components/base/Svg"

const placeList = [
    {
        placing: "1st place",
        prize: "25,000.00",
    },
    {
        placing: "2nd place",
        prize: "12,000.00",
    },
    {
        placing: "3rd place",
        prize: "8,000.00",
    },
    {
        placing: "4th place",
        prize: "6,000.00",
    },
    {
        placing: "5th place",
        prize: "5,000.00",
    },
    {
        placing: "6th place",
        prize: "3,500.00",
    },
    {
        placing: "7th place",
        prize: "2,500.00",
    },
    {
        placing: "8th place",
        prize: "2,000.00",
    },
    {
        placing: "9th place",
        prize: "1,500.00",
    },
    {
        placing: "10th place",
        prize: "1,000.00",
    },
    {
        placing: "11th place to 20th place",
        prize: "700.00 each person",
    },
    {
        placing: "21st place to 50th place",
        prize: "400.00 each person",
    },
    {
        placing: "51st place to 100th place",
        prize: "290.00 each person",
    },
]

const ContainerDiv = styled.div`
    width: 100%;
    height: 90vh;
    position: relative;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background-color: #f7f8fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
`

const HeaderContainer = styled.div`
    width: 100%;
    height: 64rem;
    padding: 0 16rem;
    border-bottom: 1rem solid #e5e6eb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d2129;
    font-size: 16rem;
    font-weight: 700;
`
const DetailClose = styled.span`
    width: 32rem;
    height: 32rem;
    position: absolute;
    top: 50%;
    right: 16rem;
    background-color: #fff;
    transform: translateY(-50%);
    border: 1rem solid #6b7785;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
`

const ContentContainer = styled.div`
    padding: 16rem;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: auto;
    overflow-x: hidden;
`
const ContentTitle = styled.div`
    color: #1d2129;
    font-size: 16rem;
    font-weight: 700;
`
const ContentText = styled.p`
    color: #272e3b;
    font-size: 14rem;
    font-weight: 500;
    line-height: 20rem;
`
const ContentOl = styled.ol`
    color: #272e3b;
    font-size: 14rem;
    font-weight: 500;
    padding-inline-start: 16rem;
`
const ContentUl = styled.ul`
    color: #272e3b;
    font-size: 14rem;
    font-weight: 500;
    padding-inline-start: 0;
    border-radius: 8rem;
    overflow: hidden;
    border: 1rem solid #f2f3f5;
    li {
        list-style: none;
        list-style-type: none;
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        height: 36rem;
        line-height: 36rem;
        padding: 10rem 12rem;
        border-bottom: 1rem solid #f2f3f5;
    }
    li:nth-last-of-type(1) {
        border-bottom: none;
    }
    .head {
        background-color: #f2f3f5;
    }
`

const Currency = styled.span`
    color: #272e3b;
    font-size: 12rem;
    font-weight: 400;
`

type IProps = {
    close: () => void
}
const Rules = ({ close }: IProps) => {
    return (
        <ContainerDiv>
            <HeaderContainer>
                <span>Rules</span>
                <DetailClose onClick={close}>
                    <Svg src="pages/Walfare/svg/cancel.svg" />
                </DetailClose>
            </HeaderContainer>
            <ContentContainer>
                <ContentTitle>Prizes</ContentTitle>
                <ContentText>
                    Prizes depend on the manner by which the player interacts with the system, as
                    detailed below.
                </ContentText>
                <ContentUl>
                    <li className="head">
                        <span>Placing</span>
                        <span>Prize</span>
                    </li>
                    {placeList.map((place) => (
                        <li key={place.placing + place.prize}>
                            <span>{place.placing}</span>
                            <span>
                                <Currency>₱</Currency>
                                {place.prize}
                            </span>
                        </li>
                    ))}
                </ContentUl>
                <ContentTitle>General Mechanics</ContentTitle>
                <ContentText>
                    Ranking each players’ effective betting volume from 00:00 to 23:59 every day.
                    Rankings of players are refreshed every hour showing only the top 100 players
                    with the accumulated total bet.
                </ContentText>
                <ContentText>
                    The bonuses will be credited directly to the account of the player and the
                    player will only able to withdraw the credited amount once the credited amount
                    is two times of the initial amount.
                </ContentText>
                <ContentTitle>Example:</ContentTitle>
                <ContentText>
                    The prize amount for the player is P25,000.00, player needs to play the credited
                    amount to P50,000.00 in order for them to withdraw the funds.
                </ContentText>
                <ContentText>
                    The rankings can be checked in the promotion tab while the promotion is active.
                    User will also receive a notification regarding the outcome and prizes received
                    of the rankings on a daily basis.
                </ContentText>
                <ContentText>
                    Note: Only bets placed on slot games count towards the valid betting amount.
                </ContentText>
                <ContentTitle>Terms And Conditions:</ContentTitle>
                <ContentOl>
                    <li>
                        Once participating in this promotion, players cannot join the same rules and
                        regulations of other promotions.
                    </li>

                    <li>
                        Players who are found to have violated these terms or engaged in improper
                        gameplay will be automatically disqualified from this promotion, and the
                        remaining account balance will be held.
                    </li>
                    <li>
                        Filbet reserves the right to change or cancel this promotion subject to
                        PAGCOR’s approval.
                    </li>
                </ContentOl>
                <ContentTitle>Irregularities And Resolution</ContentTitle>
                <ContentText>
                    In case of any irregularities during the conduct of the promotional activity,
                    management shall undertake a thorough investigation before deciding on a
                    resolution to the incident based on existing company policies.
                </ContentText>
            </ContentContainer>
        </ContainerDiv>
    )
}

export default Rules
